<template>
	<view class="box">
		<view class="" style="display: flex;justify-content: flex-start;">
			<view class="tagBox">
				<u-tag v-if="select.id" :text="select.name" :key="select.id"></u-tag>
			</view>
			<u-button style="width: 160rpx;margin: 0;" :disabled="disabled" type="primary" :plain="true" text="选择" @click="clickBtn" size="small"></u-button>
		</view>
		<u-popup :show="show" @close="close" @open="open" round="20" customStyle="myStyle" closeable>
			<view class="popupBox">
				<u-tabs :list="deptList" @click="click" :current="current"></u-tabs>
				<view class="userList">
					<u-button class="buttons" :text="item.name" v-for="item in userList" :key="item.id" @click="clickItem(item)" :type="item.isSelect ? 'primary' : 'info'"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getDeptSimpleList,getDept} from '@/api/user/deptApi'
	import {oaUserByDeptId,getOaUser} from '@/api/user/userApi'
	import {handleTree} from '@/utils/common.js'
	export default {
		model:{
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'input' // 派发事件，事件名只能是input，否则无法生效
		},
		props: {
		    value:'',
			disabled:false,
			isId:{
				type:Boolean,
				default:false
			}
		},
		watch: {
		    async value(val) {
				console.log(val)
				// 获取activeUser数据
				// let info = await getDept(val)
				// console.log(info)
				// this.activeUser = info.data
				if(this.isId){
					this.select = this.deptListAll.find(item=>{
						return item.id == this.value
					})
				}else{
					this.select = val;
				}
			}
		},
		data(){
			return {
				show:false,
				// list1:[],
				// 当前人员列表
				userList:[],
				// 选中人员列表
				// selectList:[],
				select:{},
				// 当前选中tab
				current:0,
				
				deptList:[],
				// 平铺列表
				deptListAll:[]
			}
		},
		methods:{
			close(){
				this.show = false;
				if(this.selectList){
					let arr = JSON.parse(JSON.stringify(this.selectList))
					if(this.isId){
						let idArr = arr.map(item=>{
							return item.id
						});
						this.$emit('input',idArr)
					}else{
						this.$emit('input',arr)
					}
				}
				
			},
			clickBtn(){
				this.show = true;
			},
			// 获取部门数据
			async getDeptList(){
				let data = await getDeptSimpleList()
				this.list1 = data.data;
			},
			// 点击tabs
			async click(data){
				this.userList = this.deptList[this.current].children;
			},
			clickItem(data){
				console.log(data);
				this.select = data;
				this.show = false
				// this.$emit('input',data.id)
				if(this.isId){
					this.$emit('input',data.id)
				}else{
					this.$emit('input',data)
				}
			},
			// 打开弹框时
			async open(){
				this.userList = this.deptList[this.current].children;
			},
			// 获取部门数据
			async getDeptList(){
				let data = await getDeptSimpleList();
				this.deptListAll = data.data;
				if(this.isId && this.value){
					this.select = data.data.find(item=>{
						return item.id == this.value
					})
					console.log(this.select)
				}
				let arr = []
				arr = handleTree(data.data, 'id', 'parentId');
				this.deptList = arr;
			},
		},
		async created() {
			// if(this.value){
			// 	let info = await getOaUser(this.value)
			// 	this.activeUser = info.data
			// }
			this.getDeptList()
		}
	}
</script>

<style scoped lang="less">
.tagBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.popupBox{
	width: 100%;
	min-height: 70vh;
	padding: 20rpx;
	box-sizing: border-box;
	padding-top: 40rpx;
	.userList{
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-top: 20rpx;
		.buttons{
			width: 30%;
			margin: 0;
			margin-right: 5%;
			margin-bottom: 10rpx;
			&:nth-of-type(3n){
				margin-right: 0;
			}
		}
	}
}
</style>